<template>
    <section>
        <header>header</header>
        <main>
            <router-view></router-view>
        </main>
        <footer>
            <router-link exact-active-class="active" :to="{name:'home'}">
                <i></i>
                <span>首页</span>
                </router-link>
            <router-link 
            exact-active-class="active"
            :to="{name:'fenlei'}">
                <i></i>
                <span>分类</span>
                </router-link>
            <router-link exact-active-class="active" :to="{name:'cart'}">
                <i></i>
                <span>购物车</span>
                </router-link>
            <router-link exact-active-class="active" :to="{name:'mine'}">
                <i></i>
                <span>我的</span>
                </router-link>
        </footer>
    </section>
</template>

<script>
export default {
    name: 'VueM',

  

    data() {
        return {
            
        };
    },

    mounted() {
        
    },

    methods: {
        
    },
};
</script>

<style lang="stylus" >
html
    font-size: 26.666666666666668vw;

body 
    font-size 16px
footer
  height .5rem
  border-top 1px solid #000
  position fixed
  left 0
  right 0
  bottom 0 
  display flex
  align-items center

 a
    display block
    width 25%
    text-align center
    text-decoration none

       

    i
        display block
        width .25rem
        height .25rem
        background no-repeat center / contain
        margin 0 auto .01rem 

  
</style>
<style >
     a:nth-child(1) i{
    background-image: url("../assets/我的.svg");
}   
       a:nth-child(2) i{
    background-image: url("../assets/fen_lei.svg");
} 
       a:nth-child(3) i{
    background-image: url("../assets/购物.svg");
} 
       a:nth-child(4) i{
    background-image: url("../assets/home.svg");
} 

   a:nth-child(1).active i{
    background-image: url("../assets/1.svg");
}   
       a:nth-child(2).active i{
    background-image: url("../assets/2.svg");
} 
       a:nth-child(3).active i{
    background-image: url("../assets/3.svg");
} 
       a:nth-child(4).active i{
    background-image: url("../assets/4.svg");
} 
   a span{
       color: #333;
   }
   a.active span{
       color: red;
   }
</style>